<template>
  <div>
    <navigation-bar></navigation-bar>

    <div class="Auditor_page">
      <!-- <div class="HeaderStatistic_space">
        <HeaderStatistic></HeaderStatistic>
      </div> -->
      <div class="space_for_Lec_Cla">
        <div class="lecture-class-container">
          <LectureItem class="item"></LectureItem>
          <ClassItem class="item"></ClassItem>
        </div>
      </div>

      <el-divider />


      <div class="Resource_management">
        <ResourceLogin class="item2"></ResourceLogin>
        <ResourceSuggestion class="item2"></ResourceSuggestion>
        <ResourceDownload class="item2"></ResourceDownload>
      </div>

    </div>
  </div>
</template>

<style scoped>
.Auditor_page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
}

.HeaderStatistic_space {
  margin-bottom: 20px; /* 添加间距 */
}

.space_for_Lec_Cla {
  display: flex;
  justify-content: center; /* 使项目居中 */
  width: 100%;
}

.lecture-class-container {
  display: flex;
  align-items: center;
}

.Resource_management {
  display: flex;
  justify-content: space-between; /* 使项目水平排列 */
  align-items: center; /* 垂直居中 */
  border-radius: 10px;
  height: 50vh; /* 调整高度 */
  width: 100%; /* 设置宽度为100% */
  background-color: white;
  /* background-color: rgb(0, 0, 0, 0.05); */
}

.item {
  width: 48%; /* 设置每个项目的宽度为48%（考虑到两个项目之间有空白） */
  margin: 5px;
}

.item2 {
  width: 30%; /* 设置每个项目的宽度为48%（考虑到两个项目之间有空白） */
  margin: 5px;
}

.ResourceItem_space {
  width: 100%;
}
</style>
